<template>
  <!-- 顶部标题和简介 - 采用渐变背景和动画 -->
  <div class="header-container">
    <div class="header-content">
      <h1 class="page-title">
        <span class="title-highlight">垃圾分类科普指南</span>
      </h1>
      <p class="page-subtitle">
        共建绿色家园，从正确分类开始
      </p>
    </div>
  </div>

  <!-- 分类标准说明卡片 - 网格布局带悬停效果 -->
  <div class="category-cards">
    <el-card
        v-for="(category, index) in categories"
        :key="index"
        :class="'category-card category-' + category.type"
        shadow="hover"
        @click="showCategoryTip(category)"
        :body-style="{ padding: '0' }"
    >
      <div class="category-content">
        <div class="category-icon">
          <el-icon :size="36" :color="category.color">
            <component :is="category.iconComponent" />
          </el-icon>
        </div>
        <div class="category-details">
          <h3>{{ category.name }}</h3>
          <p>{{ category.desc }}</p>
          <div class="category-examples">
            <el-tag
                v-for="(example, idx) in category.examples"
                :key="idx"
                :type="category.tagType"
                size="default"
                class="example-tag"
            >
              {{ example }}
            </el-tag>
          </div>
        </div>
        <div class="category-tip">
          <el-icon><InfoFilled /></el-icon>
          {{ category.tip }}
        </div>
      </div>
    </el-card>
  </div>

  <!-- 垃圾分类查询卡片 - 现代表单设计 -->
  <el-card class="search-card" shadow="hover">
    <div class="search-header">
      <h3><el-icon><Search /></el-icon> 垃圾分类查询</h3>
    </div>
    <el-form :model="searchGarbageForm" label-position="top">
      <div class="form-grid">
        <el-form-item label="垃圾名称" class="search-item">
          <el-input
              placeholder="输入垃圾名称，如'苹果核'"
              v-model="searchGarbageForm.name"
              clearable
              :prefix-icon="Search"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="垃圾类别" class="search-item">
          <el-select
              placeholder="选择搜索类别"
              v-model="searchGarbageForm.categoryName"
              clearable
              filterable
              :prefix-icon="Select"
          >
            <el-option
                v-for="category in categories"
                :key="category.type"
                :label="category.name"
                :value="category.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="form-actions">
        <el-button type="default" @click="resetSearch" plain>
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
        <el-button type="primary" @click="loadGarbage">
          <el-icon><Search /></el-icon> 查询
        </el-button>
        <el-button type="success" @click="showRandomTip" plain>
          <el-icon><LightBulb /></el-icon>分类科普
        </el-button>
        <el-button type="warning" @click="log">
          <el-icon><Upload /></el-icon> 去投放垃圾
        </el-button>
      </div>
    </el-form>
  </el-card>

  <!-- 垃圾列表 - 现代表格设计 -->
  <el-card class="result-card" shadow="hover">
    <template #header>
      <div class="result-header">
        <h3><el-icon><List /></el-icon> 查询结果</h3>
        <div class="result-count" v-if="garbageArr.length > 0">
          共找到 {{ garbageArr.length }} 条记录
        </div>
      </div>
    </template>

    <div v-if="garbageArr.length > 0" class="result-content">
      <el-table
          :data="pagedGarbageArr"
          style="width: 100%"
          stripe
          :row-class-name="tableRowClassName"
          v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="垃圾名称" prop="name" align="center">
          <template #default="scope">
            <el-text>{{ scope.row.name }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="垃圾类别" prop="categoryName" align="center">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.categoryName)" effect="light">
              {{ scope.row.categoryName }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
            layout="prev, pager, next, sizes"
            :total="garbageArr.length"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
            background
        />
      </div>
    </div>

    <div v-else class="empty-result">
      <el-empty description="暂无数据，请输入查询条件" :image-size="100" />
    </div>
  </el-card>

  <!-- 垃圾分类科普弹窗 - 现代化设计 -->
  <el-dialog
      v-model="tipDialogVisible"
      :title="currentTip.title"
      width="60%"
      center
      class="science-dialog"
      :before-close="handleCloseDialog"
  >
    <div class="science-content">
      <div class="tip-header">
        <div class="tip-icon" :style="{ backgroundColor: currentTip.color + '15' }">
          <el-icon :size="32" :color="currentTip.color">
            <component :is="currentTip.iconComponent" />
          </el-icon>
        </div>
        <div class="tip-title">
          <h3>{{ currentTip.title }}</h3>
          <el-tag :type="currentTip.tagType" effect="plain">
            {{ currentTip.subtitle }}
          </el-tag>
        </div>
      </div>

      <el-divider />

      <p class="tip-desc">{{ currentTip.content }}</p>

      <div class="example-section">
        <h4><el-icon><PriceTag /></el-icon> 常见例子</h4>
        <div class="example-grid">
          <el-tag
              v-for="(example, index) in currentTip.examples"
              :key="index"
              :type="currentTip.tagType"
              effect="plain"
              class="example-tag"
          >
            {{ example }}
          </el-tag>
        </div>
      </div>

      <div class="science-tip">
        <h4><el-icon><Lightning /></el-icon> 处理小贴士</h4>
        <p>{{ currentTip.tip }}</p>
      </div>

      <div v-if="currentTip.importance" class="importance-section">
        <h4><el-icon><WarningFilled /></el-icon> 环保意义</h4>
        <p>{{ currentTip.importance }}</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="showPreviousTip"
            :disabled="currentTipIndex <= 0"
            :icon="ArrowLeft"
            plain
        >
          上一条
        </el-button>
        <el-button
            @click="tipDialogVisible = false"
            :icon="Close"
        >
          关闭
        </el-button>
        <el-button
            type="primary"
            @click="showNextTip"
            :disabled="currentTipIndex >= garbageTips.length - 1"
            :icon="ArrowRight"
        >
          下一条
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import {
  Search,
  Refresh,
  Upload,
  ArrowLeft,
  ArrowRight,
  CollectionTag,
  LightRain,
  Warning,
  LightBulb,
  List,
  Leaf,
  InfoFilled,
  PriceTag,
  Lightning,
  WarningFilled,
  Close,
  Select
} from '@element-plus/icons-vue'

// 加载状态
const loading = ref(false);

// 垃圾分类类别定义 - 增加图标组件和颜色
const categories = ref([
  {
    type: "recyclable",
    name: "可回收垃圾",
    desc: "适宜回收利用的生活废弃物",
    iconComponent: "Refresh",
    color: "#67C23A",
    tagType: "success",
    examples: ["纸张", "塑料瓶"],
    tip: "可回收垃圾是资源再利用的关键。"
  },
  {
    type: "hazardous",
    name: "有害垃圾",
    desc: "对人体健康或环境有害的废弃物",
    iconComponent: "Warning",
    color: "#F56C6C",
    tagType: "danger",
    examples: ["电池", "药品"],
    tip: "有害垃圾特殊处理，避免污染环境。"
  },
  {
    type: "kitchen",
    name: "厨余垃圾",
    desc: "易腐烂的食品类废弃物",
    iconComponent: "Food",
    color: "#E6A23C",
    tagType: "warning",
    examples: ["剩菜", "果皮"],
    tip: "厨余垃圾可以变成有机肥料。"
  },
  {
    type: "other",
    name: "其他垃圾",
    desc: "除上述外的其他生活废弃物",
    iconComponent: "Delete",
    color: "#909399",
    tagType: "info",
    examples: ["纸巾", "塑料袋"],
    tip: "其他垃圾需要妥善处理。"
  }
]);

// 搜索表单
const searchGarbageForm = ref({ name: "", categoryName: "" });
const garbageArr = ref([]);

// 加载垃圾数据
const loadGarbage = () => {
  loading.value = true;
  let data = qs.stringify(searchGarbageForm.value);
  axios.get("http://localhost:8080/v1/garbage/select?" + data).then((response) => {
    if (response.data.code == 2000) {
      garbageArr.value = response.data.data;
      currentPage.value = 1; // 重置到第一页
    } else {
      ElMessage.error(response.data.msg);
    }
  }).finally(() => {
    loading.value = false;
  });
};

// 重置搜索
const resetSearch = () => {
  searchGarbageForm.value = { name: "", categoryName: "" };
  loadGarbage();
};

// 投放记录
const log = () => {
  router.push("/log");
  ElMessage.success("请先登录，方可参与投放");
};

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const pagedGarbageArr = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return garbageArr.value.slice(start, end);
});
const handlePageChange = (page) => {
  currentPage.value = page;
};
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};

// 表格行样式
const tableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return 'even-row';
  }
  return 'odd-row';
};

// 获取标签类型
const getTagType = (categoryName) => {
  const category = categories.value.find(c => c.name === categoryName);
  return category ? category.tagType : "";
};

// 科普弹窗相关
const tipDialogVisible = ref(false);
const currentTip = ref({});
const currentTipIndex = ref(-1);
const garbageTips = [
  {
    title: "可回收垃圾科普",
    subtitle: "资源再利用的关键",
    iconComponent: "Refresh",
    color: "#67C23A",
    content: "可回收垃圾是指适宜回收利用和资源化利用的生活废弃物，主要包括废纸张、废塑料、废玻璃、废金属和废织物等。这些物品经过专业处理后可以重新变成资源，减少对原生资源的开采。",
    examples: [
      "废纸张：报纸、书本、纸箱、办公用纸等",
      "废塑料：塑料瓶、塑料玩具、塑料桶等",
      "废玻璃：玻璃瓶、玻璃杯、玻璃窗等",
      "废金属：易拉罐、金属餐具、金属工具等",
      "废织物：旧衣服、床单、窗帘等"
    ],
    tip: "投放前请保持物品清洁干燥，避免污染。纸类应折好压平，塑料瓶应清空内容物并压扁，玻璃制品应小心轻放避免破碎。",
    importance: "回收1吨废纸可节约木材300公斤，回收1吨废塑料可回炼600公斤柴油，回收1吨易拉罐可少采20吨铝矿。",
    tagType: "success"
  },
  {
    title: "有害垃圾科普",
    subtitle: "需要特殊处理的危险废弃物",
    iconComponent: "Warning",
    color: "#F56C6C",
    content: "有害垃圾是指对人体健康或自然环境造成直接或潜在危害的生活废弃物。这类垃圾需要特殊安全处理，随意丢弃会污染土壤和水源，甚至通过食物链危害人体健康。",
    examples: [
      "废电池：充电电池、纽扣电池等",
      "废灯管：荧光灯管、节能灯等",
      "废药品：过期药品、药品包装等",
      "废油漆：油漆桶、溶剂等",
      "废杀虫剂：杀虫剂罐、农药瓶等"
    ],
    tip: "投放时请保持物品完整，避免破损。废电池应防止短路，废灯管应小心轻放避免破碎，废药品应保持原包装。",
    importance: "一粒纽扣电池可污染600立方米水，相当于一个人一生的饮水量。正确处理有害垃圾可避免重金属和有毒化学物质污染环境。",
    tagType: "danger"
  },
  {
    title: "厨余垃圾科普",
    subtitle: "有机资源的重要来源",
    iconComponent: "Food",
    color: "#E6A23C",
    content: "厨余垃圾是指居民日常生活及食品加工、饮食服务等活动中产生的易腐垃圾。这类垃圾经过生物技术处理可以变成有机肥料或沼气，实现资源化利用。",
    examples: [
      "食材废料：剩菜剩饭、果皮果核、菜叶菜根等",
      "过期食品：糕点、饼干、罐头食品等",
      "家庭盆栽：花草、落叶等",
      "茶叶渣、咖啡渣等"
    ],
    tip: "投放前应沥干水分，有包装的应去除包装物。大骨头、贝壳等不易腐烂的应归为其他垃圾。",
    importance: "1吨厨余垃圾可生产约0.3吨有机肥料，或产生约100立方米沼气。有效分类可减少垃圾填埋场产生的甲烷气体排放。",
    tagType: "warning"
  },
  {
    title: "其他垃圾科普",
    subtitle: "需妥善处理的最终废弃物",
    iconComponent: "Delete",
    color: "#909399",
    content: "其他垃圾是指除可回收物、有害垃圾、厨余垃圾以外的其他生活废弃物。这类垃圾需要卫生填埋或焚烧处理，有效减少对环境的污染。",
    examples: [
      "受污染纸张：卫生纸、餐巾纸、纸尿裤等",
      "受污染塑料：塑料袋、一次性餐具等",
      "灰土：烟蒂、尘土、陶瓷碎片等",
      "一次性用品：尿不湿、妇女卫生用品等"
    ],
    tip: "应尽量沥干水分后投放。难以辨识类别的生活垃圾可投入其他垃圾容器内。",
    importance: "通过卫生填埋或焚烧发电处理其他垃圾，可减少垃圾对地下水和土壤的污染，焚烧发电还能产生可再生能源。",
    tagType: "info"
  },
  {
    title: "垃圾分类的意义",
    subtitle: "保护环境的必要行动",
    iconComponent: "Earth",
    color: "#409EFF",
    content: "垃圾分类是解决'垃圾围城'困境的有效途径，通过源头分类可以实现垃圾减量化、资源化和无害化处理，对保护环境和可持续发展具有重要意义。",
    examples: [
      "减少土地占用：分类后可回收和堆肥部分可达60%",
      "减少污染：特别是减少有害垃圾对环境的污染",
      "变废为宝：1吨废塑料可回炼600公斤柴油",
      "减少碳排放：回收利用比原材料生产节省大量能源"
    ],
    tip: "养成家中设置多个垃圾桶的习惯，学习分类知识，从源头正确分类。不确定分类时可使用本系统查询。",
    importance: "如果全国2.7亿家庭都能做好垃圾分类，每年可减少约4000万吨垃圾填埋，节约土地6万亩，减少碳排放1.2亿吨。",
    tagType: "primary"
  }
];


// 显示随机提示
const showRandomTip = () => {
  const randomIndex = Math.floor(Math.random() * garbageTips.length);
  currentTipIndex.value = randomIndex;
  currentTip.value = garbageTips[randomIndex];
  tipDialogVisible.value = true;
};

// 显示上一条提示
const showPreviousTip = () => {
  if (currentTipIndex.value > 0) {
    currentTipIndex.value--;
    currentTip.value = garbageTips[currentTipIndex.value];
  }
};

// 显示下一条提示
const showNextTip = () => {
  if (currentTipIndex.value < garbageTips.length - 1) {
    currentTipIndex.value++;
    currentTip.value = garbageTips[currentTipIndex.value];
  }
};

// 显示分类科普
const showCategoryTip = (category) => {
  const tip = garbageTips.find(t => t.title === `${category.name}科普`);
  if (tip) {
    currentTip.value = tip;
    currentTipIndex.value = garbageTips.findIndex(t => t.title === tip.title);
    tipDialogVisible.value = true;
  }
};

onMounted(() => {
  loadGarbage();
});
</script>

<style scoped>
/* 现代渐变色方案 */
:root {
  --primary-green: #67C23A;
  --light-green: #f0f9eb;
  --dark-green: #5daf34;
  --warning: #E6A23C;
  --danger: #F56C6C;
  --info: #909399;
  --primary: #409EFF;
  --background: #f5f7fa;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 页面标题样式 - 动画效果 */
.header-container {
  background: linear-gradient(135deg, var(--primary-green), #8BC34A);
  color: #8BC34A;
  padding: 40px 20px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.header-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="10" fill="white" fill-opacity="0.1"/></svg>');
  z-index: -1;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  display: inline-block;
  position: relative;
  animation: fadeInUp 0.8s ease;
}

.title-highlight {
  color: #35984b;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 分类卡片样式 - 现代卡片设计 */
.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

.category-card {
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  border: none;
  display: flex;
  flex-direction: column;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover-shadow);
}

.category-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.category-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(103, 194, 58, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  align-self: center;
}

.category-details {
  flex: 1;
  text-align: center;
}

.category-details h3 {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.category-details p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
}

.category-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.example-tag {
  margin: 0;
  font-size: 12px;
}

.category-tip {
  font-size: 12px;
  color: #999;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 搜索卡片样式 - 现代表单设计 */
.search-card {
  margin: 0 auto 30px;
  max-width: 1200px;
  border-radius: 12px;
  border: none;
  box-shadow: var(--card-shadow);
}

.search-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.search-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.search-item {
  margin-bottom: 0;
}

.search-item :deep(.el-form-item__label) {
  font-weight: 500;
  color: #555;
  padding-bottom: 8px;
}

.form-actions {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
  margin-top: 20px;
}

/* 结果卡片样式 */
.result-card {
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 12px;
  border: none;
  box-shadow: var(--card-shadow);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.result-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-count {
  font-size: 14px;
  color: #666;
}

.result-content {
  padding: 0 20px;
}

/* 表格样式 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #fafafa;
  font-weight: 600;
}

:deep(.el-table tr.even-row) {
  background-color: #fafafa;
}

:deep(.el-table tr:hover) {
  background-color: #f5f7fa;
}

/* 分页样式 */
.pagination-container {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

/* 空状态 */
.empty-result {
  padding: 60px 0;
  text-align: center;
}

/* 科普弹窗样式 */
.science-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.science-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, var(--primary-green), #8BC34A);
  margin: 0;
  padding: 15px 20px;
}

.science-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.science-dialog :deep(.el-dialog__body) {
  padding: 25px;
  max-height: 70vh;
  overflow-y: auto;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.tip-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tip-title h3 {
  margin: 0;
  font-size: 22px;
  color: #333;
}

.tip-desc {
  line-height: 1.8;
  margin: 20px 0;
  color: #555;
  font-size: 15px;
}

.example-section, .science-tip, .importance-section {
  margin: 25px 0;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.example-section h4, .science-tip h4, .importance-section h4 {
  color: var(--primary);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.science-dialog :deep(.el-dialog__footer) {
  background-color: #f5f7fa;
  padding: 15px 20px;
  text-align: center;
  border-top: 1px solid #eee;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .category-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 30px 15px;
  }

  .page-title {
    font-size: 28px;
  }

  .page-subtitle {
    font-size: 16px;
  }

  .category-cards {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }

  .form-actions {
    flex-direction: column;
  }

  .search-card, .result-card {
    margin: 0 15px 20px;
  }

  .science-dialog :deep(.el-dialog) {
    width: 90% !important;
  }

  .example-grid {
    grid-template-columns: 1fr;
  }
}
</style>